<template>
  <div v-if="show">
    <div class="ant-modal-root">
      <div class="ant-modal-mask"></div>
      <div tabindex="-1" class="ant-modal-wrap" role="dialog">
        <div class="ant-modal" role="document" style="width: 800px; transform-origin: 1093px -62px;">
          <div tabindex="0" aria-hidden="true" style="width: 0px; height: 0px; overflow: hidden; outline: none;"></div>
          <div class="ant-modal-content">
            <button type="button" aria-label="Close" @click="handleClose" class="ant-modal-close"><span class="ant-modal-close-x"><span
                role="img" aria-label="close" class="anticon anticon-close ant-modal-close-icon"><svg focusable="false"
                                                                                                      class=""
                                                                                                      data-icon="close"
                                                                                                      width="1em"
                                                                                                      height="1em"
                                                                                                      fill="currentColor"
                                                                                                      aria-hidden="true"
                                                                                                      viewBox="64 64 896 896"><path
                d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"></path></svg></span></span>
            </button>
            <div class="ant-modal-body">
              <div class="sign-container2">
                <div class="ant-row ant-row-center" type="flex" style="row-gap: 0px;">
                  <div class="ant-col ant-col-7"
                       style="margin-right: 30px; display: flex; flex-direction: column; align-items: center; justify-content: center;">
                    <h3 class="fz16">推荐扫码登录</h3>
                    <p style="margin-top: 10px;">「极速验证」告别短信验证码</p>
                    <div class="qrcode"><img
                        src="https://cdn.tehub.com/uploads/default/course/c9blDS9flm/c8eb76bc-41a2-4916-a32b-cf7ecedd8c08.jpg?imageView2/1/q/50/format/webp"
                        alt="二维码">
                      <div style="margin-bottom: 20px; margin-top: 10px;" class="flex"><i class="el-icon"
                                                                                          style="font-size: 16px; --color: #21AD38; vertical-align: middle;">
                        <svg viewBox="0 0 24 24" width="1.2em" height="1.2em">
                          <path fill="currentColor"
                                d="M9.5 4C5.36 4 2 6.69 2 10c0 1.89 1.08 3.56 2.78 4.66L4 17l2.5-1.5c.89.31 1.87.5 2.91.5A5.22 5.22 0 0 1 9 14c0-3.31 3.13-6 7-6c.19 0 .38 0 .56.03C15.54 5.69 12.78 4 9.5 4m-3 2.5a1 1 0 0 1 1 1a1 1 0 0 1-1 1a1 1 0 0 1-1-1a1 1 0 0 1 1-1m5 0a1 1 0 0 1 1 1a1 1 0 0 1-1 1a1 1 0 0 1-1-1a1 1 0 0 1 1-1M16 9c-3.31 0-6 2.24-6 5s2.69 5 6 5c.67 0 1.31-.08 1.91-.25L20 20l-.62-1.87C20.95 17.22 22 15.71 22 14c0-2.76-2.69-5-6-5m-2 2.5a1 1 0 0 1 1 1a1 1 0 0 1-1 1a1 1 0 0 1-1-1a1 1 0 0 1 1-1m4 0a1 1 0 0 1 1 1a1 1 0 0 1-1 1a1 1 0 0 1-1-1a1 1 0 0 1 1-1Z"></path>
                        </svg>
                      </i> <span class="px-2">微信扫码注册/登录</span>
                      </div>
                    </div>
                  </div>
                  <div class="ant-col ant-col-2">
                    <div class="ant-divider ant-divider-vertical" role="separator" style="height: 100%;"></div>
                  </div>
                  <div class="ant-col ant-col-10"><h2 class="fz24">验证码登录/注册</h2>
                    <form class="el-form el-form--default el-form--label-right" style="margin-top: 15px; width: 300px;">
                      <div class="el-form-item asterisk-left" style="height: 40px;">
                        <div class="el-form-item__content">
                          <div style="position: relative;">
                            <div style="position: absolute; z-index: 999; left: 15px; top: 12px;"><a
                                class="ant-dropdown-trigger"> +86 </a></div>
                            <div class="el-input el-input--large m-2 phone-input"
                                 style="width: 300px; position: absolute; left: 0px; z-index: 9;">
                              <div class="el-input__wrapper" role="button" tabindex="-1"><input
                                  class="el-input__inner" type="text" autocomplete="off" tabindex="0"
                                  placeholder="请输入手机号" id="el-id-100-5"></div>
                            </div>
                          </div>
                        </div>
                      </div>
                      <div class="el-form-item asterisk-left" style="height: 40px;">
                        <div class="el-form-item__content">
                          <div style="position: relative; width: 100%;">
                            <div
                                style="position: absolute; z-index: 999; right: 26px; top: 12px;  cursor: pointer;color:#05b96b">
                              获取验证码
                            </div>
                            <div class="el-input el-input--large m-2 code-input"
                                 style="width: 300px; position: absolute; left: 0px; z-index: 9;">
                              <div class="el-input__wrapper" role="button" tabindex="-1"><input
                                  class="el-input__inner" type="text" autocomplete="off" tabindex="0"
                                  placeholder="请输入密码" id="el-id-100-6"></div>
                            </div>
                          </div>
                        </div>
                      </div>
                      <div class="el-form-item asterisk-left">
                        <div class="el-form-item__content">
                          <button class="ant-btn ant-btn-primary ant-btn-lg" type="button" @click="handleLogin"
                                  style="width: 300px; margin-top: 30px;"><span>立即登录</span></button>
                        </div>
                      </div>
                      <div class="el-form-item asterisk-left">
                        <div class="el-form-item__content">
                          <div class="other">
                            <div class=""> 快捷登录：</div>
                            <div class="other-item">
                              <svg viewBox="0 0 24 24" width="1.2em" height="1.2em">
                                <path fill="currentColor"
                                      d="M12 2A10 10 0 0 0 2 12c0 4.42 2.87 8.17 6.84 9.5c.5.08.66-.23.66-.5v-1.69c-2.77.6-3.36-1.34-3.36-1.34c-.46-1.16-1.11-1.47-1.11-1.47c-.91-.62.07-.6.07-.6c1 .07 1.53 1.03 1.53 1.03c.87 1.52 2.34 1.07 2.91.83c.09-.65.35-1.09.63-1.34c-2.22-.25-4.55-1.11-4.55-4.92c0-1.11.38-2 1.03-2.71c-.1-.25-.45-1.29.1-2.64c0 0 .84-.27 2.75 1.02c.79-.22 1.65-.33 2.5-.33c.85 0 1.71.11 2.5.33c1.91-1.29 2.75-1.02 2.75-1.02c.55 1.35.2 2.39.1 2.64c.65.71 1.03 1.6 1.03 2.71c0 3.82-2.34 4.66-4.57 4.91c.36.31.69.92.69 1.85V21c0 .27.16.59.67.5C19.14 20.16 22 16.42 22 12A10 10 0 0 0 12 2Z"></path>
                              </svg>
                            </div>
                            <div class="other-item">
                              <svg viewBox="0 0 24 24" width="1.2em" height="1.2em" color="#50C8FD">
                                <path fill="currentColor"
                                      d="M3.18 13.54c.58-1.38 1.39-2.4 1.99-2.62c-.01-.8.14-1.3.39-1.7c0-.03-.06-.36.16-.77C5.87 4.85 8.21 2 12 2s6.13 2.85 6.28 6.45c.22.41.16.74.16.77c.25.4.4.9.39 1.7c.6.22 1.41 1.24 1.99 2.63c.75 1.76.87 3.45.27 3.75c-.41.2-1.06-.3-1.67-1.18c-.24.98-.84 1.88-1.69 2.59c.9.33 1.48.87 1.48 1.48c0 1-1.58 1.81-3.52 1.81c-1.76 0-3.19-.66-3.48-1.5h-.42c-.29.84-1.72 1.5-3.48 1.5c-1.94 0-3.52-.81-3.52-1.81c0-.61.58-1.15 1.48-1.48c-.85-.71-1.45-1.61-1.69-2.59c-.61.88-1.26 1.38-1.67 1.18c-.6-.3-.48-1.99.27-3.76Z"></path>
                              </svg>
                            </div>
                          </div>
                        </div>
                      </div>
                      <div class="el-form-item asterisk-left">
                        <div class="el-form-item__content"><span class="des-span">手机号自动登录或注册即同意<a target="_blank"
                                                                                                  href="https://tehub.com/privacy">《TeHub隐私政策》</a></span>
                        </div>
                      </div>
                    </form>
                  </div>
                </div>
              </div>
            </div></div>
          <div tabindex="0" aria-hidden="true" style="width: 0px; height: 0px; overflow: hidden; outline: none;"></div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
var loginStore = useStore.loginState()
var show = computed(()=>loginStore.loginFlag)
const handleOpen = () => {
  loginStore.setLoginOpen(true)
}

const handleClose = () => {
  loginStore.setLoginOpen(false)
}

// 登录方法
const handleLogin = () => {
  // 写入登录状态
  // 关闭弹窗
  handleClose()
}

</script>

<style scoped>
.ant-row {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-flow: row wrap;
  -ms-flex-flow: row wrap;
  flex-flow: row wrap
}

.ant-row, .ant-row:after, .ant-row:before {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex
}

.ant-row-center {
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center
}

.ant-col {
  max-width: 100%;
  min-height: .0625rem;
  position: relative
}

.ant-col-10 {
  -webkit-box-flex: 0;
  display: block;
  -webkit-flex: 0 0 41.66666667%;
  -ms-flex: 0 0 41.66666667%;
  flex: 0 0 41.66666667%;
  max-width: 41.66666667%
}

.ant-col-7 {
  -webkit-box-flex: 0;
  display: block;
  -webkit-flex: 0 0 29.16666667%;
  -ms-flex: 0 0 29.16666667%;
  flex: 0 0 29.16666667%;
  max-width: 29.16666667%
}

.ant-col-2 {
  -webkit-box-flex: 0;
  display: block;
  -webkit-flex: 0 0 8.33333333%;
  -ms-flex: 0 0 8.33333333%;
  flex: 0 0 8.33333333%;
  max-width: 8.33333333%
}

.sign-container2 {
  overflow: hidden;
  padding: 1.875rem 0
}

.sign-container2 .phone-input .el-input__inner {
  padding-left: 1.875rem
}

.sign-container2 .other {
  color: #5a5a5a;
  font-size: .8125rem;
  width: 100%
}

.sign-container2 .other, .sign-container2 .other .other-item {
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex
}

.sign-container2 .other .other-item {
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  background-color: #f6f6f6;
  border-radius: 50%;
  height: 1.5625rem;
  -webkit-justify-content: center;
  justify-content: center;
  margin-left: .625rem;
  width: 1.5625rem
}

.sign-container2 .other .other-item svg {
  font-size: .875rem
}

.sign-container2 .des-span, .sign-container2 .des-span a {
  color: #999;
  font-size: .8125rem;
  line-height: 1.6
}

.sign-container2 .qrcode {
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-align-items: center;
  align-items: center;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-justify-content: center;
  justify-content: center
}

.sign-container2 .qrcode img {
  height: 15.625rem;
  width: 15.625rem
}

.sign-container2 .ant-btn:focus, .sign-container2 .ant-btn:hover {
  border-color: #fff !important;
  outline: 0 none !important
}

.ant-modal {
  -webkit-font-feature-settings: "tnum";
  -moz-font-feature-settings: "tnum";
  font-feature-settings: "tnum";
  box-sizing: border-box;
  color: #000000d9;
  font-size: .875rem;
  font-variant: tabular-nums;
  line-height: 1.5715;
  list-style: none;
  margin: 0 auto;
  max-width: calc(100vw - 2rem);
  padding: 0 0 1.5rem;
  pointer-events: none;
  position: relative;
  top: 6.25rem;
  width: auto
}

.ant-modal-mask {
  background-color: #00000073;
  bottom: 0;
  height: 100%;
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 1000
}

.ant-modal-wrap {
  -webkit-overflow-scrolling: touch;
  bottom: 0;
  left: 0;
  outline: 0;
  overflow: auto;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 1000
}

.ant-modal-content {
  background-clip: padding-box;
  background-color: #fff;
  border: 0;
  border-radius: .25rem;
  box-shadow: 0 .1875rem .375rem -.25rem #0000001f, 0 .375rem 1rem #00000014, 0 .5625rem 1.75rem .5rem #0000000d;
  pointer-events: auto;
  position: relative
}

.ant-modal-close {
  background: transparent;
  border: 0;
  color: #00000073;
  cursor: pointer;
  font-weight: 700;
  line-height: 1;
  outline: 0;
  padding: 0;
  position: absolute;
  right: 0;
  text-decoration: none;
  top: 0;
  -webkit-transition: color .3s;
  transition: color .3s;
  z-index: 10
}

.ant-modal-close-x {
  display: block;
  font-size: 1rem;
  font-style: normal;
  height: 3.5rem;
  line-height: 3.5rem;
  text-align: center;
  text-rendering: auto;
  text-transform: none;
  width: 3.5rem
}

.ant-modal-close:focus, .ant-modal-close:hover {
  color: #000000bf;
  text-decoration: none
}

.ant-modal-body {
  word-wrap: break-word;
  font-size: .875rem;
  line-height: 1.5715;
  padding: 1.5rem
}

@media (max-width: 767px) {
  .ant-modal {
    margin: .5rem auto;
    max-width: calc(100vw - 1rem)
  }
}

.el-form {
  --el-form-label-font-size: var(--el-font-size-base);
  --el-form-inline-content-width: 13.75rem
}

.el-form-item {
  --font-size: .875rem;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  margin-bottom: 1.125rem
}

.el-form-item__content {
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-box-flex: 1;
  -webkit-align-items: center;
  align-items: center;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  font-size: var(--font-size);
  line-height: 2rem;
  min-width: 0;
  position: relative
}

.ant-btn {
  background-image: none;
  background: #fff;
  border: .0625rem solid #d9d9d9;
  border-radius: .25rem;
  box-shadow: 0 .125rem #00000004;
  color: #000000d9;
  cursor: pointer;
  display: inline-block;
  font-size: .875rem;
  font-weight: 400;
  height: 2.1875rem;
  line-height: 1.5715;
  padding: .34375rem 12px;
  position: relative;
  text-align: center;
  -ms-touch-action: manipulation;
  touch-action: manipulation;
  -webkit-transition: all .3s cubic-bezier(.645, .045, .355, 1);
  transition: all .3s cubic-bezier(.645, .045, .355, 1);
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  white-space: nowrap
}

.ant-btn, .ant-btn:active, .ant-btn:focus {
  outline: 0
}

.ant-btn:not([disabled]):hover {
  text-decoration: none
}

.ant-btn:not([disabled]):active {
  box-shadow: none;
  outline: 0
}

.ant-btn-lg {
  border-radius: .25rem;
  font-size: 1rem;
  height: 2.5rem;
  padding: .4rem 12px
}

.ant-btn:focus, .ant-btn:hover {
  background: #fff;
  border-color: #484a4d;
  color: #484a4d
}

.ant-btn:active {
  background: #fff;
  border-color: #13161a;
  color: #13161a
}

.ant-btn:active, .ant-btn:focus, .ant-btn:hover {
  background: #fff;
  text-decoration: none
}

.ant-btn > span {
  display: inline-block
}

.ant-btn-primary {
  background: #343a40;
  border-color: #343a40;
  box-shadow: 0 .125rem #0000000b;
  color: #fff;
  text-shadow: 0 -.0625rem 0 rgba(0, 0, 0, .12)
}

.ant-btn-primary:focus, .ant-btn-primary:hover {
  background: #484a4d;
  border-color: #484a4d;
  color: #fff
}

.ant-btn-primary:active {
  background: #13161a;
  border-color: #13161a;
  color: #fff
}

.ant-btn:before {
  background: #fff;
  border-radius: inherit;
  bottom: -.0625rem;
  content: "";
  display: none;
  left: -.0625rem;
  opacity: .35;
  pointer-events: none;
  position: absolute;
  right: -.0625rem;
  top: -.0625rem;
  -webkit-transition: opacity .2s;
  transition: opacity .2s;
  z-index: 1
}

.ant-btn:active > span, .ant-btn:focus > span {
  position: relative
}

.el-input--large .el-input__wrapper {
  padding: 0.0625rem 012px;
}

.el-input {
  --el-input-text-color: var(--el-text-color-regular);
  --el-input-border: var(--el-border);
  --el-input-hover-border: var(--el-border-color-hover);
  --el-input-focus-border: var(--el-color-primary);
  --el-input-transparent-border: 0 0 0 .0625rem transparent inset;
  --el-input-border-color: var(--el-border-color);
  --el-input-border-radius: var(--el-border-radius-base);
  --el-input-bg-color: var(--el-fill-color-blank);
  --el-input-icon-color: var(--el-text-color-placeholder);
  --el-input-placeholder-color: var(--el-text-color-placeholder);
  --el-input-hover-border-color: var(--el-border-color-hover);
  --el-input-clear-hover-color: var(--el-text-color-secondary);
  --el-input-focus-border-color: var(--el-color-primary);
  --el-input-width: 100%;
  --el-input-height: var(--el-component-size);
  box-sizing: border-box;
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  font-size: var(--el-font-size-base);
  line-height: var(--el-input-height);
  position: relative;
  vertical-align: middle;
  width: var(--el-input-width)
}

.el-input::-webkit-scrollbar {
  width: .375rem;
  z-index: 11
}

.el-input::-webkit-scrollbar:horizontal {
  height: .375rem
}

.el-input::-webkit-scrollbar-thumb {
  background: var(--el-text-color-disabled);
  border-radius: .3125rem;
  width: .375rem
}

.el-input::-webkit-scrollbar-corner,.el-input::-webkit-scrollbar-track {
  background: var(--el-fill-color-blank)
}

.el-input::-webkit-scrollbar-track-piece {
  background: var(--el-fill-color-blank);
  width: .375rem
}

.el-input .el-input__clear,.el-input .el-input__password {
  color: var(--el-input-icon-color);
  cursor: pointer;
  font-size: .875rem
}

.el-input .el-input__clear:hover,.el-input .el-input__password:hover {
  color: var(--el-input-clear-hover-color)
}

.el-input .el-input__count {
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  color: var(--el-color-info);
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  font-size: .75rem;
  height: 100%
}

.el-input .el-input__count .el-input__count-inner {
  background: var(--el-fill-color-blank);
  display: inline-block;
  line-height: normal;
  padding-left: .5rem
}

.el-input__wrapper {
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-align-items: center;
  align-items: center;
  background-color: var(--el-input-bg-color,var(--el-fill-color-blank));
  background-image: none;
  border-radius: var(--el-input-border-radius,var(--el-border-radius-base));
  box-shadow: 0 0 0 .0625rem var(--el-input-border-color,var(--el-border-color)) inset;
  cursor: text;
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-flex-grow: 1;
  flex-grow: 1;
  -webkit-justify-content: center;
  justify-content: center;
  padding: .0625rem .6875rem;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-transition: var(--el-transition-box-shadow);
  transition: var(--el-transition-box-shadow)
}

.el-input__wrapper:hover {
  box-shadow: 0 0 0 .0625rem var(--el-input-hover-border-color) inset
}

.el-input__wrapper.is-focus {
  box-shadow: 0 0 0 .0625rem var(--el-input-focus-border-color) inset
}

.el-input__inner {
  --el-input-inner-height: calc(var(--el-input-height, 32px) - .125rem);
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  -webkit-appearance: none;
  background: none;
  border: none;
  box-sizing: border-box;
  color: var(--el-input-text-color,var(--el-text-color-regular));
  -webkit-flex-grow: 1;
  flex-grow: 1;
  font-size: inherit;
  height: var(--el-input-inner-height);
  line-height: var(--el-input-inner-height);
  outline: none;
  padding: 0;
  width: 100%
}

.el-input__inner:focus {
  outline: none
}

.el-input__inner::-webkit-input-placeholder {
  color: var(--el-input-placeholder-color,var(--el-text-color-placeholder))
}

.el-input__inner::-moz-placeholder {
  color: var(--el-input-placeholder-color,var(--el-text-color-placeholder))
}

.el-input__inner:-ms-input-placeholder {
  color: var(--el-input-placeholder-color,var(--el-text-color-placeholder))
}

.el-input__inner::placeholder {
  color: var(--el-input-placeholder-color,var(--el-text-color-placeholder))
}

.el-input__inner[type=password]::-ms-reveal {
  display: none
}

.el-input__prefix {
  -ms-flex-negative: 0;
  color: var(--el-input-icon-color,var(--el-text-color-placeholder));
  -webkit-flex-shrink: 0;
  flex-shrink: 0;
  -webkit-flex-wrap: nowrap;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  height: 100%;
  pointer-events: none;
  text-align: center;
  -webkit-transition: all var(--el-transition-duration);
  transition: all var(--el-transition-duration);
  white-space: nowrap
}

.el-input__prefix,.el-input__prefix-inner {
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex
}

.el-input__prefix-inner {
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
  pointer-events: all
}

.el-input__prefix-inner>:last-child {
  margin-right: .5rem
}

.el-input__prefix-inner>:first-child,.el-input__prefix-inner>:first-child.el-input__icon {
  margin-left: 0
}

.el-input__suffix {
  -ms-flex-negative: 0;
  color: var(--el-input-icon-color,var(--el-text-color-placeholder));
  -webkit-flex-shrink: 0;
  flex-shrink: 0;
  -webkit-flex-wrap: nowrap;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  height: 100%;
  pointer-events: none;
  text-align: center;
  -webkit-transition: all var(--el-transition-duration);
  transition: all var(--el-transition-duration);
  white-space: nowrap
}

.el-input__suffix,.el-input__suffix-inner {
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex
}

.el-input__suffix-inner {
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
  pointer-events: all
}

.el-input__suffix-inner>:first-child {
  margin-left: .5rem
}

.el-input .el-input__icon {
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  height: inherit;
  -webkit-justify-content: center;
  justify-content: center;
  line-height: inherit;
  margin-left: .5rem;
  -webkit-transition: all var(--el-transition-duration);
  transition: all var(--el-transition-duration)
}

.el-input__validateIcon {
  pointer-events: none
}

.el-input.is-active .el-input__wrapper {
  box-shadow: 0 0 0 .0625rem var(--el-input-focus-color, ) inset
}

.el-input.is-disabled {
  cursor: not-allowed
}

.el-input.is-disabled .el-input__wrapper {
  background-color: var(--el-disabled-bg-color);
  box-shadow: 0 0 0 .0625rem var(--el-disabled-border-color) inset
}

.el-input.is-disabled .el-input__inner {
  -webkit-text-fill-color: var(--el-disabled-text-color);
  color: var(--el-disabled-text-color);
  cursor: not-allowed
}

.el-input.is-disabled .el-input__inner::-webkit-input-placeholder {
  color: var(--el-text-color-placeholder)
}

.el-input.is-disabled .el-input__inner::-moz-placeholder {
  color: var(--el-text-color-placeholder)
}

.el-input.is-disabled .el-input__inner:-ms-input-placeholder {
  color: var(--el-text-color-placeholder)
}

.el-input.is-disabled .el-input__inner::placeholder {
  color: var(--el-text-color-placeholder)
}

.el-input.is-disabled .el-input__icon {
  cursor: not-allowed
}

.el-input.is-exceed .el-input__wrapper {
  box-shadow: 0 0 0 .0625rem var(--el-color-danger) inset
}

.el-input.is-exceed .el-input__suffix .el-input__count {
  color: var(--el-color-danger)
}

.anticon {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: inherit;
  display: inline-block;
  font-style: normal;
  line-height: 0;
  text-align: center;
  text-rendering: optimizelegibility;
  text-transform: none;
  vertical-align: -0.125em;
}

.el-input--large {
  --el-input-height: var(--el-component-size-large);
  font-size: .875rem;
}

.el-input--large .el-input__wrapper {
  padding: .0625rem 12px
}

.el-input--large .el-input__inner {
  --el-input-inner-height: calc(var(--el-input-height, 40px) - .125rem)
}

.el-input--small {
  --el-input-height: var(--el-component-size-small);
  font-size: .75rem
}

.el-input--small .el-input__wrapper {
  padding: .0625rem .4375rem
}

.el-input--small .el-input__inner {
  --el-input-inner-height: calc(var(--el-input-height, 24px) - .125rem)
}

.el-input-group {
  -webkit-box-align: stretch;
  -ms-flex-align: stretch;
  -webkit-align-items: stretch;
  align-items: stretch;
  width: 100%
}

.el-input-group,.el-input-group__append,.el-input-group__prepend {
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex
}

.el-input-group__append,.el-input-group__prepend {
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-align-items: center;
  align-items: center;
  background-color: var(--el-fill-color-light);
  border-radius: var(--el-input-border-radius);
  color: var(--el-color-info);
  -webkit-justify-content: center;
  justify-content: center;
  min-height: 100%;
  padding: 0 1.25rem;
  position: relative;
  white-space: nowrap
}

.el-input-group__append:focus,.el-input-group__prepend:focus {
  outline: none
}

.el-input-group__append .el-button,.el-input-group__append .el-select,.el-input-group__prepend .el-button,.el-input-group__prepend .el-select {
  display: inline-block;
  margin: 0 -1.25rem
}

.el-input-group__append button.el-button,.el-input-group__append button.el-button:hover,.el-input-group__append div.el-select .el-input__wrapper,.el-input-group__append div.el-select:hover .el-input__wrapper,.el-input-group__prepend button.el-button,.el-input-group__prepend button.el-button:hover,.el-input-group__prepend div.el-select .el-input__wrapper,.el-input-group__prepend div.el-select:hover .el-input__wrapper {
  background-color: transparent;
  border-color: transparent;
  color: inherit
}

.el-input-group__append .el-button,.el-input-group__append .el-input,.el-input-group__prepend .el-button,.el-input-group__prepend .el-input {
  font-size: inherit
}

.el-input-group__prepend {
  border-bottom-right-radius: 0;
  border-right: 0;
  border-top-right-radius: 0;
  box-shadow: .0625rem 0 0 0 var(--el-input-border-color) inset,0 .0625rem 0 0 var(--el-input-border-color) inset,0 -.0625rem 0 0 var(--el-input-border-color) inset
}

.el-input-group__append {
  border-left: 0;
  box-shadow: 0 .0625rem 0 0 var(--el-input-border-color) inset,0 -.0625rem 0 0 var(--el-input-border-color) inset,-.0625rem 0 0 0 var(--el-input-border-color) inset
}

.el-input-group--prepend>.el-input__wrapper,.el-input-group__append {
  border-bottom-left-radius: 0;
  border-top-left-radius: 0
}

.el-input-group--prepend .el-input-group__prepend .el-select .el-input .el-input__inner {
  box-shadow: none!important
}

.el-input-group--prepend .el-input-group__prepend .el-select .el-input .el-input__wrapper {
  border-bottom-right-radius: 0;
  border-top-right-radius: 0;
  box-shadow: .0625rem 0 0 0 var(--el-input-border-color) inset,0 .0625rem 0 0 var(--el-input-border-color) inset,0 -.0625rem 0 0 var(--el-input-border-color) inset
}

.el-input-group--prepend .el-input-group__prepend .el-select .el-input.is-focus .el-input__inner {
  box-shadow: none!important
}

.el-input-group--prepend .el-input-group__prepend .el-select .el-input.is-focus .el-input__wrapper,.el-input-group--prepend .el-input-group__prepend .el-select .el-input.is-focus .el-input__wrapper:focus {
  box-shadow: .0625rem 0 0 0 var(--el-input-focus-border-color) inset,.0625rem 0 0 0 var(--el-input-focus-border-color),0 .0625rem 0 0 var(--el-input-focus-border-color) inset,0 -.0625rem 0 0 var(--el-input-focus-border-color) inset!important;
  z-index: 2
}

.el-input-group--prepend .el-input-group__prepend .el-select .el-input.is-focus .el-input__wrapper:focus {
  outline: none
}

.el-input-group--prepend .el-input-group__prepend .el-select:hover .el-input__inner {
  box-shadow: none!important
}

.el-input-group--prepend .el-input-group__prepend .el-select:hover .el-input__wrapper {
  box-shadow: .0625rem 0 0 0 var(--el-input-hover-border-color) inset,.0625rem 0 0 0 var(--el-input-hover-border-color),0 .0625rem 0 0 var(--el-input-hover-border-color) inset,0 -.0625rem 0 0 var(--el-input-hover-border-color) inset!important;
  z-index: 1
}

.el-input-group--append>.el-input__wrapper {
  border-bottom-right-radius: 0;
  border-top-right-radius: 0
}

.el-input-group--append .el-input-group__append .el-select .el-input .el-input__inner {
  box-shadow: none!important
}

.el-input-group--append .el-input-group__append .el-select .el-input .el-input__wrapper {
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
  box-shadow: 0 .0625rem 0 0 var(--el-input-border-color) inset,0 -.0625rem 0 0 var(--el-input-border-color) inset,-.0625rem 0 0 0 var(--el-input-border-color) inset
}

.el-input-group--append .el-input-group__append .el-select .el-input.is-focus .el-input__inner {
  box-shadow: none!important
}

.el-input-group--append .el-input-group__append .el-select .el-input.is-focus .el-input__wrapper {
  box-shadow: -.0625rem 0 0 0 var(--el-input-focus-border-color),-.0625rem 0 0 0 var(--el-input-focus-border-color) inset,0 .0625rem 0 0 var(--el-input-focus-border-color) inset,0 -.0625rem 0 0 var(--el-input-focus-border-color) inset!important;
  z-index: 2
}

.el-input-group--append .el-input-group__append .el-select:hover .el-input__inner {
  box-shadow: none!important
}

.el-input-group--append .el-input-group__append .el-select:hover .el-input__wrapper {
  box-shadow: -.0625rem 0 0 0 var(--el-input-hover-border-color),-.0625rem 0 0 0 var(--el-input-hover-border-color) inset,0 .0625rem 0 0 var(--el-input-hover-border-color) inset,0 -.0625rem 0 0 var(--el-input-hover-border-color) inset!important;
  z-index: 1
}
</style>